<template>
  <el-table ref="tableData" class="tableComponents" :loading="loading" highlight-current-row :data="listData" border
    stripe style="{width: 100%}" @selection-change="handleSelectionChange" height="calc(100% - 50px)"
    @sort-change="changeTableSort">
    <el-table-column v-if="showSelectColumn" type="selection" align="center" width="60"
      :selectable="selectable"></el-table-column>
    <el-table-column v-if="showIndexColumn" type="index" label="序号" align="center" width="80"></el-table-column>
    <template v-for="(propItem, index) in propList">
      <el-table-column :key="index" align="center" v-if="propItem && !propItem.hide"
        :prop="propItem.prop" :label="propItem.label" :show-overflow-tooltip="toolTip"
        :sortable="sortColumn.includes(propItem.prop) ? 'custom' : false"
        :min-width="propItem.minWidth" :width="propItem.width">
        <template #default="scope">
          <slot :name="propItem.slotName" :row="scope.row" :item="propItem" :index="scope.$index">
            {{ scope.row[propItem.prop] }}
          </slot>
        </template>
      </el-table-column>
    </template>
  </el-table>
</template>

<script>
import tableApi from "@/api/basic-info-manage/table-config";
export default {
  props: {
    listData: {
      type: Array,
      required: true,
    },
    propList: {
      type: Array,
      required: true,
    },
    showIndexColumn: {
      type: Boolean,
      default: true,
    },
    showSelectColumn: {
      type: Boolean,
      default: true,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    page: {
      type: Object,
      default: () => ({ currentPage: 1, pageSize: 10, total: 10 }),
    },
    showFooter: {
      type: Boolean,
      default: true,
    },
    showEditColumn: {
      type: Boolean,
      default: true,
    },
    toolTip: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    listData: {
      handler () {
        this.changeSerial()
      },
      deep: true
    }
  },
  data () {
    return {
      height: '',
      sortColumn: []
    }
  },
  watch: {
    listData () {
      this.changeSerial()
    }
  },
  mounted () {
    this.showEditColumn && this.loadSortColumn()
    this.changeSerial()
  },
  methods: {
    changeTableSort(column) {
      this.$emit('sortChange', column)
    },
    loadSortColumn () {
      tableApi.queryByUrl(this.$route.path).then(res => {
        this.sortColumn = res.data || []
      })
    },
    changeSerial () {
      let formLength = 10 - this.listData.length
      if (this.listData && this.listData.length >= 0 && this.listData.length < 10) {
        for (let i = 0; i < formLength; i++) {
          this.listData.push({ index: this.listData.length + 1 + '' })
        }
      }
    },
    handleSizeChange () {
      this.$emit("handleSizeChange", this.page.pageSize);
    },
    handleCurrentChange (row) {
      this.$emit("handleCurrentChange", row);
    },
    handleSelectionChange (row) {
      this.$emit("handleSelectionChange", row);
    },
    //table项是否可以被选中
    selectable (row) {
      return !('index' in row)
    },
  },
};
</script>

<style scoped lang="scss">

</style>
